<template>
	<view class="container">
		<!-- 自定义导航条 -->
		<u-navbar left-icon=" " title="蜂润农" placeholder fixed bgColor="#FFC046" :titleStyle="{color:'#ffffff'}"></u-navbar>

		<view class="content-box">
			<view class="info-banner">
				<image src="/static/home/banner-bg.png" class="banner-bg-img"></image>

				<view class="user-info f-a-start">
					<view class="f-a-start">
						<image :src="userInfo.avatar" mode="aspectFill" class="user-pic">
						</image>
						<view class="info-right">
							<view class="info-name">{{userInfo.nickname||'默认经纪人'}}</view>
							<view class="info-phone">{{userInfo.mobile}}</view>
						</view>
					</view>
					<view class="notice-box">
						<u-badge :isDot="unReadNum>0" bgColor="#FF5656" absolute :offset="[0,0]" style="z-index: 9;"></u-badge>
						<image src="/static/home/icon-notice.png" class="icon-notice" @click="goPage('/pages/notice/list')">
						</image>
					</view>

				</view>
				<view class="user-statistics f-j-around">
					<view class="item-count text-center" @click="goPage('/pages/weigh/record')">
						<view class="value">{{weighTotal.weight_num}}<span class="small">kg</span></view>
						<view class="label">过磅总重</view>
					</view>
					<view class="item-count text-center" @click="goPage('/pages/weigh/record')">
						<view class="value">{{weighTotal.count}}<span class="small">次</span></view>
						<view class="label">过磅次数</view>
					</view>
				</view>
			</view>

			<view class="money-box">
				<view class="user-balance f-c-between">
					<view class="f-a-center">
						<view class="label">我的余额：</view>
						<view class="value">{{userInfo.money||0}}<span class="font-24">元</span></view>
					</view>
					<button class="btn-withdrawal" @click="goPage('/pages/money/withdrawal')">提现</button>
				</view>
				<view class="balance-grid f-j-around">
					<view class="grid-item" @click="goPage('/pages/money/recharge')">
						<image src="/static/home/icon-recharge.png" class="item-img"></image>
						<view class="item-label">余额充值</view>
					</view>
					<view class="grid-item" @click="goPage('/pages/money/detail')">
						<image src="/static/home/icon-yue.png" class="item-img"></image>
						<view class="item-label">余额明细</view>
					</view>
				</view>
			</view>

			<view class="qrcode-box">
				<view class="code-title f-c-between">
					<view class="title">过磅二维码</view>
					<view class="record" @click="goPage('/pages/weigh/record')">过磅记录</view>
				</view>
				<view class="code-info f-center">
					<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="weighCode" size="170" :options="qrCodeOption"></uqrcode> -->
					<image v-if="qrCodeUrl" :src="$imgUrl(qrCodeUrl)" class="qrcode-url"></image>
					<view v-else class="not-qrurl">
						暂无过磅二维码
					</view>
				</view>
				<view class="scan-tips">称重后请把二维码对准扫码口完成过磅</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrCodeUrl: '', //二维码
				unReadNum: 0,
				weighTotal: {
					weight_num: 0,
					count: 0
				},
			}
		},
		computed: {},
		onLoad() {
			if (this.token) {
				this.getUserOpenId()
			}
		},
		onShow() {
			if (this.token) {
				this.getUnReadMessageNum()
				this.getWeighQrcode()
				this.getWeighUserSummary()
			}
		},
		methods: {
			//获取用户openId
			getUserOpenId() {
				// #ifdef MP-WEIXIN
				this.$store.dispatch('get_userInfo').then(res => {
					if (res.userinfo && !res.userinfo.openid) {
						this.$store.dispatch('get_wechatCode').then(data => {
							let info = {
								...res.userinfo,
								openid: data.openid
							}
							this.$store.commit('SET_userInfo', info)
						})
					} else {
						this.$store.commit('SET_userInfo', res.userinfo)
					}
				})
				// #endif

				// #ifdef APP
				this.$store.dispatch('get_userInfo').then(res => {
					if (res.userinfo && !res.userinfo.app_openid) {
						this.$store.dispatch('get_wechatCode').then(data => {
							let info = {
								...res.userinfo,
								app_openid: data.app_openid
							}
							this.$store.commit('SET_userInfo', info)
						})
					} else {
						this.$store.commit('SET_userInfo', res.userinfo)
					}
				})
				// #endif
			},

			//获取过磅信息汇总
			getWeighUserSummary() {
				this.$api.get_weigh_mySummary().then(res => {
					this.weighTotal = res
				})
			},

			//获取过磅二维码
			getWeighQrcode() {
				this.$api.get_user_qrcode().then(res => {
					this.qrCodeUrl = res.url
				})
			},

			//获取未读消息数
			getUnReadMessageNum() {
				this.$api.get_user_messageNum().then(res => {
					this.unReadNum = res
				})
			},

			goPage(url) {
				uni.navigateTo({
					url
				})
			}
		},

		async onPullDownRefresh() {
			await this.$store.dispatch('get_userInfo')
			uni.stopPullDownRefresh()
		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding-bottom: 100rpx;
	}

	.content-box {
		padding: 20rpx 30rpx;

		.info-banner {
			width: 100%;
			// height: 240rpx;
			border-radius: 12rpx;
			padding: 32rpx 32rpx 15rpx;
			position: relative;

			.banner-bg-img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.notice-box {
				position: relative;

				.icon-notice {
					width: 46rpx;
					height: 46rpx;
				}
			}

			.user-info {
				position: relative;
				justify-content: space-between;

				.user-pic {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.info-right {
					font-weight: 500;
					color: #666666;
					font-size: calc(28rpx * 1.2);

					.info-phone {
						margin-top: 6rpx;
					}
				}
			}

			.user-statistics {
				position: relative;
				margin-top: 32rpx;

				.item-count {
					color: #FFFFFF;
					font-weight: 500;

					.value {
						font-size: calc(32rpx * 1.5);

						.small {
							font-size: calc(20rpx * 1.5);
						}
					}

					.label {
						font-size: calc(20rpx * 1.5);
						color: #666666;
					}
				}
			}
		}

		.money-box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;
			// padding: 22rpx 46rpx 42rpx;
			padding: 22rpx 36rpx 42rpx;
			margin-top: 20rpx;

			.user-balance {
				.label {
					font-weight: 500;
					font-size: calc(28rpx * 1.5);
					color: #3C3832;
					// margin-right: 44rpx;
				}

				.value {
					font-weight: 500;
					font-size: 60rpx;
					color: #FFC046;
					
					.font-24{
						font-size: calc(24rpx * 1.5);
					}
				}

				.btn-withdrawal {
					// width: 100rpx;
					// height: 48rpx;
					background: #FF5656;
					border-radius: 50rpx;
					font-weight: 400;
					// font-size: 28rpx;
					font-size: calc(28rpx * 1.5);
					padding: 0 ;
					color: #FFFFFF;
					padding: 4rpx 22rpx;
					line-height: 48rpx;
				}
			}

			.balance-grid {
				margin-top: 38rpx;

				.grid-item {
					.item-img {
						width: 68rpx;
						height: 68rpx;
						display: block;
						margin: 0 auto;
					}

					.item-label {
						font-weight: 400;
						font-size: calc(24rpx * 1.5);
						color: #3C3832;
						margin-top: 12rpx;
					}
				}
			}
		}


		.qrcode-box {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 32rpx;
			margin-top: 20rpx;

			.code-title {
				padding: 16rpx 2rpx;
				border-bottom: 1px solid #D8D8D8;

				.title {
					font-weight: 500;
					// font-size: 28rpx;
					font-size: calc(28rpx * 1.5);
					color: #3C3832;
				}

				.record {
					font-weight: 400;
					// font-size: 28rpx;
					font-size: calc(28rpx * 1.5);
					color: #3C3832;
				}
			}

			.code-info {
				padding: 70rpx 0 76rpx;

				.qrcode-url {
					width: 360rpx;
					height: 360rpx;
				}

				.not-qrurl {
					font-size: 24rpx;
					font-size: calc(24rpx * 1.5);
					padding: 80rpx 0;
				}
			}

			.scan-tips {
				font-weight: 400;
				// font-size: 24rpx;
				font-size: calc(24rpx * 1.5);
				color: #FFC046;
				text-align: center;
				padding-bottom: 36rpx;
			}
		}
	}
</style>